<!DOCTYPE html>
<!--    使用 Thymeleaf 模版引擎-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <!--    引入动画css -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap/bootstrap.css}">
    <!--    分页-->
    <link rel="stylesheet" th:href="@{/css/pagenation/myPagination.css}">
    <!--    后台管理的 css 样式文件-->
    <link rel="stylesheet" th:href="@{/css/admin-management.css}">

    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.js}"></script>

    <style>
        /*  对 bootstrap 的 th,td 进行稍微的修改*/
        th {
            text-align: center;
        }

        td {
            width: 345px;
            text-align: center;
            border: 1px solid #dee2e6 !important;
        }

        #add-friend {
            height: 40px;
            width: 100px;
            text-align: center;
            line-height: 40px;
            margin: 10px auto;
            cursor: pointer;
            background-color: #64ff5b;
            border-radius: 5px;
        }

        .right .content .content-top {
            height: 155px !important;
        }

        /*  对样式稍微做一定的修改*/
        .delete-btn {
            position: initial !important;
        }
    </style>

</head>
<body>

<!--    将公共的部分抽取出来（左侧导航栏）  -->
<div th:replace="~{common/commonsfile::admin-leftbar}"></div>

<div class="right">
    <div class="nav">
        <div class="to-main">
            <a th:href="@{/main}">回到首页</a>
        </div>
        <div class="logout">
            <!--    注销之后，回到登录页-->
            <a th:href="@{/user/logout}">注销</a>
        </div>
    </div>

    <div class="content">
        <div class="content-top">
            <div class="content-top-title">
                <p>友链</p>
            </div>
            <hr class="myhr">

            <!--    右侧顶部操作栏，提供一些操作按钮    -->
            <div class="content-top-option">
                <!--    增加分类的一系列按钮, 点击添加之后，原来的按钮隐藏，然后这些按钮显示-->
                <form class="my-form" th:action="@{/admin/addFriend}" method="post">
                    友链博客标题：<input id="add-blog-title" type="text" name="fBlogtitle">
                    友链博客地址：<input id="add-blog-address" type="text" name="fBlogaddress">
                    友链头像地址：<input id="add-image-address" type="text" name="fImageaddress">
                    友链邮箱地址：<input id="add-email-address" type="text" name="fEmail">
                </form>
                <div id="add-friend">
                    <!--  点击添加博客按钮，跳转到  添加博客界面   -->
                    + 添加友链
                </div>
            </div>
        </div>

        <!--    右侧底部，用来展示一个表格-->
        <div class="content-bottom">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">友链博客标题</th>
                    <th scope="col">友链博客地址</th>
                    <th scope="col">友链头像地址</th>
                    <th scope="col">友链邮箱地址</th>
                    <th scope="col">创建时间</th>
                    <th scope="col">审核是否通过</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <!--    特别注意，放在表格里面的标签可能有多个，所以不能使用 id 属性-->
                <tr class="table-color table-warning" th:each="friend,friendState:${friends}">
                    <th scope="row" th:text="${friendState.index + 1}"></th>
                    <td th:text="${friend.getFBlogtitle()}"></td>
                    <td th:text="${friend.getFBlogaddress()}"></td>
                    <td th:text="${friend.getFImageaddress()}"></td>
                    <td th:text="${friend.getFEmail()}"></td>
                    <td th:text="${friend.getFTime()}"></td>
                    <td th:text="${friend.getFFlag()}"></td>
                    <!--    特别注意：下面这些标签的顺序不能打乱  -->
                    <td class="operation">
                        <!--    利用 a 标签发送请求，结合 RestFul 风格-->
                        <div class="delete-btn">
                            删除
                            <form class="delete-form-type" th:action="@{/admin/deleteFriend}" style="display: none"
                                  method="post">
                                <input class="delte-typeid" type="text" name="fid" th:value="${friend.getFId()}">
                            </form>

                        </div>

                    </td>
                </tr>
                </tbody>
            </table>

            <div id="pagination" class="pagination"></div>

            <!--    一共有多少条分类，利用这个span标签来临时储存数据，在到 js 中进行操作   -->
            <span th:text="${typeNumber}" class="type-numbers" style="display: none"></span>
            <!--    存放当前页码-->
            <span th:text="${currentPage}" class="span-currentPage" style="display: none"></span>
            <!--    隐藏的 form 表单,用于处理分页时的请求-->
            <form class="hide-form" th:action="@{/admin/changePageType}" method="post" style="display: none">
                <input type="text" class="currentpage" name="currentPage">
            </form>


        </div>
    </div>

</div>

<!--    分页-->
<script th:src="@{/js/pagenation/myPagination.js}"></script>
<script>

    $(function () {

        // 删除分类
        $('.delete-btn').click(function () {
            // 由于表格中的每一行是遍历出来的，所有有很多类名相同的标签，需要通过兄弟选择器区分
            console.log("tagId = " + $(this).children('form').children('input').val());
            $(this).children('form').addClass("need-commit");       // 同时标记该标签去，方便在 success 函数中获得
            $.ajax("/admin/CheckType", {
                type: 'post',
                dataType: 'text',       // 返回纯文本字符串
                data: {"id": $(this).children('form').children('input').val()},
                success: function (data, status) {
                    if (data === "YES") {
                        alert("删除成功！");
                        $('.need-commit').submit();
                    } else {
                        alert("删除失败！分类被占用！")
                    }
                }
            })
        });


        //  执行添加操作
        $('#add-friend').click(function () {
            $('.my-form').submit();        // 提交表单
            alert("增加友链成功！");
        });


        //   分页-》 利用 Ajax
        var typeNumbers = parseInt($('.type-numbers').text());      //  一共有多少个分类
        var eachPageNumber = 7;        // 每页 10 条记录
        var pageNumber = Math.ceil(typeNumbers / eachPageNumber);     // 总页数
        var currentPage;        // 当前所在页码
        // console.log($('.span-currentPage').text());
        if ($('.span-currentPage').text() === '') {
            // 第一次访问，页码为1
            currentPage = 1;
        } else {
            currentPage = $('.span-currentPage').text();
        }
        console.log("初始页面为" + currentPage);
        new Page({
            id: 'pagination',
            pageTotal: pageNumber, //必填,总页数
            pageAmount: eachPageNumber,  //每页多少条
            dataTotal: typeNumbers, //总共多少条数据
            curPage: currentPage, //初始页码,不填默认为1;因为是重新发送一个请求，所以当前页码会改变，需要处理一下
            pageSize: 5, //分页个数,不填默认为5
            showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
            showSkipInputFlag: true, //是否支持跳转,不填默认不显示
            // 切换分页按钮每次会触发的事件，在方法中this.curPage,是当前页数，直接可以进行对应的ajax了
            getPage: function (page) {
                currentPage = page;
                $('.currentpage').val(page);        // 将当前页码赋值给 input 标签
                $('.hide-form').submit();       // 执行表单提交到服务器


            }
        })

    })

</script>

</body>
</html>